import React, { Component } from 'react';
//getSnapshotBeforeUpdate 生命周期函数 (获取dom 更新前的快照)
// 作用:获取dom 信息 一般用来获取更新前的dom 信息
// 注意: 该生命周期必须有返回值, 返回dom 信息, 
// 注意: 必须配合componentDidUpdate 一起使用, 并且返回值作为 componentDidUpdate的一个参数使用
export default class Father extends Component {
    state = {
        heroArr: [{
            id: 1,
            name: '及时雨-宋江'
        },
        {
            id: 2,
            name: '玉麒麟-卢俊义'
        },
        {
            id: 3,
            name: '智多星-吴用'
        },
        {
            id: 4,
            name: '入云龙-公孙胜'
        }]
    }
    render() {
        return (
            <div>
                <ul style={{
                    height: "200px",
                    border: '1px solid red',
                    overflow: 'auto'
                }}>
                    {
                        this.state.heroArr.map(item => <li key={item.id}>{item.name}</li>)
                    }
                </ul>
                <p>
                    <button onClick={() => this.addHero()}>添加英雄</button>
                </p>
            </div>
        )
    }
    addHero() {
        this.state.heroArr.push({
            id: this.state.heroArr[this.state.heroArr.length - 1].id + 1,
            name: '豹子头-林冲'
        })

        this.setState({
            heroArr: this.state.heroArr
        })
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        // return  返回为更新前的dom信息
        // offsetHeight  innerHeight

        console.log(document.querySelector('ul').offsetHeight);
        return document.querySelector('ul').offsetHeight
    }
    componentDidUpdate(props, state, snapshot) {
        console.log('snapshot', snapshot);
        let ulbox = document.querySelector('ul')
        ulbox.scrollTop = ulbox.scrollHeight - snapshot
    }

}
